<template>
  <div>
    <h2>fetch() 发送请求</h2>
    <button @click="fetchGetRoleist">请求数据</button>
    <p>{{ resinfo }}</p>
    <button @click="postRolesPage">添加数据</button>
    <button @click="PutRolesPage">修改数据</button>
    <button @click="DeleteRolesPage">删除数据</button>
    <button @click="SaveRolesPage">批量修改数据</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  getRolesPage,
  postRolesPage,
  PutRolesPage,
  DeleteRolesPage,
  SaveRolesPage
} from './service/study1/demo1'

const resinfo = ref()

// get
// const url =
//   'http://goapi.sanjitian.cn/api/roles/page?keywords&startDate&endDate&pageNum=1&pageSize=10'
const fetchGetRoleist = async () => {
  //   fetch(url)
  //     .then((response) => {
  //       if (!response.ok) {
  //         throw new Error('网络请求失败')
  //       }
  //       return response.json()
  //     })
  //     .then((data) => {
  //       console.log('请求成功', data.data.list)
  //     })
  //     .catch((error) => {
  //       console.error('请求出错', error)
  //     })
  const resjson = await getRolesPage()
  console.log(resjson)
  resinfo.value = resjson.data
}
// fetchGetRoleist()
</script>

<style></style>
